<template>
  <div class="processingTj">
    <p class="text">{{text}}</p>
    <IEcharts :option="jqTimelist" />
  </div>
</template>

<script>
  import IEcharts from 'vue-echarts-v3/src/full.js'
  import pieEchartsOption from '@/utils/echarts/pie.js'
  export default {
    components: {
      IEcharts
    },
    data () {
      return {
        userInfo: JSON.parse(sessionStorage.getItem('GOVERNANCE_USER_INFO')),
        // 登录处室信息
        deptPojo: {
          deptId: ''
        },
        jqTimelist: {
          color: ['#FFB980', '#5AB1EF', '#97B552'],
          title: {
            left: '26.5%',
            top: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          graphic: [],
          series: []
        },
        xlpeoplenum: [], // 展示数据用的
        text: '', // echarts 标题
        sum: '' // echarts 中心 数字
      }
    },
    created () {
      this.getjqsjList()
    },
    methods: {
      getjqsjList () {
        this.deptPojo.deptId = this.userInfo.xtbmid
        this.$axios.post(this.$api.homeCharts.deptEmpStateCharts, this.deptPojo).then(res => {
          if (res) {
            this.xlpeoplenum = res.map(item => {
              return { value: item.value, name: item.name }
            })

            if (res.length === 0) {
              this.text = '无工单办理情况'
              this.jqTimelist.title.text = ''
            } else {
              this.text = this.$moment().format('YYYY') + '年办理情况统计'
              this.getEChartsSum()
              this.jqTimelist.title.text = this.sum
            }
          }
          this.apijqsjData()
        })
      },
      getEChartsSum () {
        let ss = this.xlpeoplenum.map(item => {
          return item.value
        })
        this.sum = ss.reduce((totle, item) => totle + item)
        switch (this.sum.toString().length) {
          case 1:
            this.jqTimelist.title.left = '28%'
            break
          case 2:
            this.jqTimelist.title.left = '27.5%'
            break
          case 3:
            this.jqTimelist.title.left = '26.5%'
            break
          case 4:
            this.jqTimelist.title.left = '25.5%'
            break
          default:
            break
        }
      },
      apijqsjData () {
        this.jqTimelist.series = [
          {
            data: this.xlpeoplenum,
            name: '工单办理情况统计',
            selectedMode: 'single',
            radius: [60, 120],
            roseType: ''
          }
        ]
        // this.jqTimelist.title = {
        //   text: ''
        // }
        this.jqTimelist.graphic = [
          {
            style: {
              text: ''
            }
          },
          {
            style: {
              text: ''
            }
          }
        ]
        this.jqTimelist = pieEchartsOption(this.jqTimelist)
      }
    }

  }
</script>

<style lang='scss' scoped>
  .processingTj{
    height: 400px;
    position: relative;
    .text {
      position: absolute;
      top: 0px;
      text-align: center;
      font-size: 18px;
      font-weight: bold;
      width: 100%;
    }
  }
</style>
